<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 220px;
            height: 165px;
            background-image: url("./imgs/大海001.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            border: 1px solid #00F;
            border-radius: 20px;
            background-position: 20px 30px;
            position: relative;
        }

        .box:hover::after {
            cursor: pointer;
            position: absolute;
            width: 30px;
            height: 30px;
            border: 1px solid blue;
            right: 5px;
            top: 5px;
        }

        .image-container {
            position: relative;
            display: inline-block;
            width: 300px;
            height: 220px;
            object-fit: cover;
            overflow: hidden;
        }

        .image-container:hover::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            border: 1px solid blue;
        }


    </style>
</head>
<body>
<div class="box"></div>

<div class="image-container">
    <img src="./imgs/大海001.jpg" alt="Your Image">
</div>

<a href="https://img0.baidu.com/it/u=3371150166,1094527291&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1699981200&t=eb12525ef9ea1d7150db8cd4d0bcaf07"
   alt="aaa" target="_blank">链接</a>

<butotn @click="download">下载</butotn>
<script>
    //点击下载
    function download() {
        var a = document.createElement('a') // 创建一个<a></a>标签
        a.href = '../static/xxx.pdf'         //重点（如测试发现下载文件不存在/找不到，检查路径）
        a.download = 'xxx.pdf'         // 设置下载文件文件名
        a.style.display = 'none'           // 隐藏a标签
        document.body.appendChild(a)       // 将a标签追加到文档对象中
        a.click()                          // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
        a.remove()                        // 一次性的，用完就删除a标签

    }
</script>

</body>
</html>
